/* 1rem = 20px */
* {
  padding: 0;
  margin: 0;
  -webkit-touch-callout:none;
  -moz-touch-callout:none;
  -ms-touch-callout:none;
  touch-callout:none;
  user-select: none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none
}
body {
  font-family:PingFangSC-Regular,PingFang SC;
  width: 95%;
  margin: 0 auto;
  background: #fff;
}
header {
  height: 4rem;
  display: flex;
  align-items: center;
}
header > img {
  width: 0.9rem;
  height: 1.7rem;
}
main {
  margin-top: 1.25rem;
}
.user {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.user > .user-avatar{ 
  height: 100%;
  width: 4rem;
}
.user > .user-avatar > img {
  height: 100%;
  width: 100%;
}
.user > .user-info{
  flex: 1;
  padding-left: 1.1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.user > .user-info > p:nth-child(1){
font-weight:600;
color: #333333;
}
.user > .user-info > p:nth-child(2) {
  
}
.user > .user-info > p:nth-child(2) > span{
  color: #6875FC;
  font-weight:400;
  border-radius:1px;
  padding: 0 0.25rem;
  border:1px solid rgba(104,117,252,1);
  display: inline-block;
  vertical-align:middle;
}

.user > button {
  width: 6rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  border:1px solid rgba(253,195,62,1);
  color: rgba(253,195,62,1);
  background-color: rgba(255,255,255,1);
}
.user > .cancel-favorite {
  border:1px solid rgba(153,153,153,1);
  color: rgba(153,153,153,1)
}
/* 经验内容区域 */
article {
  
}
article > .content-text {
  text-align: justify;
  color: #333333;
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1.1rem;
}
/* 适配多张图片不同布局 begin */
article > .img-list {
  margin-bottom: 1.7rem;
  display: grid;
  /* 圆角遮盖*/
  overflow: hidden;
  border-radius:1rem;
}
article  img{ 
  height: 100%;
  width: 100%;
  object-fit: cover;
}
article > .item-1 { 
  height: 19.5rem;
}
article > .item-2{ 
  grid-column-gap: 0.5rem;
  grid-template-columns: 17.5rem 17.5rem;
  grid-template-rows: 19.5rem;
}
/* 三个 */
article > .item-3{ 
  grid-gap: 0.5rem 0.5rem;
  grid-template-columns: 17.5rem 17.5rem;
  grid-template-rows: 9.5rem 9.5rem;
}
article > .item-3 > figure:first-child {
  grid-row-start: 1;
  grid-row-end: 4;
}
/* 四个 */
article > .item-4{ 
  grid-gap: 0.5rem 0.5rem;
  grid-template-columns: 17.5rem 17.5rem;
  grid-template-rows: 9.5rem 9.5rem;
}
/* 五个 */
article > .item-5{ 
  grid-gap: 0.5rem 0.5rem;
  grid-template-columns: 17.5rem 17.5rem ;
  grid-template-rows: 9.5rem 9.5rem 9.5rem;
}
article > .item-5 > figure:first-child {
  grid-row-start: 1;
  grid-row-end: 3;
}
/* 六个 */
article > .item-6{ 
  grid-gap: 0.5rem 0.5rem;
  grid-template-columns: 11.5rem 11.5rem 11.5rem;
  grid-template-rows: 9.5rem 9.5rem;
}
/* 七个 */
article > .item-7{ 
  grid-gap: 0.5rem 0.5rem;
  grid-template-columns: 11.5rem 11.5rem 11.5rem;
  grid-template-rows: 9.5rem 9.5rem 9.5rem;
}
article > .item-7 > figure:first-child {
  grid-column-start: 1;
  grid-column-end: 3;
}
article > .item-7 > figure:nth-child(3) {
  grid-column-start: 1;
  grid-column-end: 3;
}
/* 八个 */
article > .item-8{ 
  grid-gap: 0.5rem 0.5rem;
  grid-template-columns: 11.5rem 11.5rem 11.5rem;
  grid-template-rows: 9.5rem 9.5rem 9.5rem;
}
article > .item-8 > figure:first-child {
  grid-column-start: 1;
  grid-column-end: 3;
}
/* 九个 */
article > .item-9{ 
  grid-gap: 0.5rem 0.5rem;
  grid-template-columns: 11.5rem 11.5rem 11.5rem;
  grid-template-rows: 9.5rem 9.5rem 9.5rem;
}
/* 适配多张图片不同布局 end */

article >.operation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
article >.operation>.time {
  height: 2rem;
  line-height: 2rem;
  font-weight:400;
  color: #777777;
  font-size: 1.2rem;
}
article >.operation >.handle{
  display: flex;
  flex-direction: row;
}
article >.operation .thumb-up{
  height: 2rem;
  margin-right: 0.5rem;
  line-height: 2rem;
  border-radius:0.3rem;
}
article >.operation .thumb-up > img{
  width: 1.2rem;
  height: 0.7rem;
  margin: 0 0.4rem;
}
article >.operation .thumb-up > .thumb-up-num{
  margin: 0 0.4rem 0 1.3rem;
}
article >.operation .thumb-down{
  width: 2rem;
  height: 2rem;
  margin-right: 1.5rem;
  border-radius:0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
article >.operation .thumb-down > img {
  width: 1.2rem;
  height: 0.7rem;
}
article >.operation .jiaxin {
  display: flex;
  align-items: center;
  height: 2rem;
  margin-right: 0.9rem;
}
article >.operation .jiaxin > img {
  width: 2.2rem;
  height: 1.8rem;
  margin-right: 0.7rem;
}
article >.operation .jiaxin > span {
  color: #333333;
  font-weight:500;
  font-size: 1.5rem;
}
article >.operation .report {
  display: flex;
  align-items: center;
  height: 2rem;
}
article >.operation .report > img {
  width: 1.7rem;
  height: 1.5rem;
}

/* 底部店铺信息 */
footer {
  height: 8.7rem;
  box-shadow:0px 0px 8px 0px rgba(224,221,221,1);
  border-radius:0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer > .store-logo {
  margin-left: 1rem;
  width: 6.7rem;
  height: 6.7rem;
}
footer > .store-logo > img {
  width: 100%;
  height: 100%;
}
footer > .store-info {
  flex: 1;
  padding-left: 1rem;
  height:  6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
footer > .store-info > p:nth-child(1) {
  color: #333333;
  font-size: 1.5rem;
  font-weight:600;
  width: 15rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
footer > .store-info > p:nth-child(2) {
  color: #999999;
  font-weight:400;
}
footer > .store-info > p:nth-child(3) {
  color: #999999;
  font-weight:400;
  width: 15rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  
}
footer > button {
  width: 7.1rem;
  height: 2.6rem;
  margin-right: 1rem;
  border-radius: 0.5rem;
  border:1px solid rgba(253,195,62,1);
  color: rgba(253,195,62,1);;
  background-color: rgba(255,255,255,1);
}

/* 公共样式 */
.bg-color-default {
  background:rgba(253,195,62,0.3);
}
.bg-color-active {
  background:rgba(253,195,62,1);
}

/* 弹窗气泡 */
#tips {
  width:15.7rem;
  height:5.65rem;
  background:rgba(0,0,0,0.8);
  border-radius:1rem;
  position: fixed;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 5.65rem;
  text-align: center;
  display: none;
}
 /* 取消确认弹窗 */
 #confirm {
   display: none;
   background-color: #FFFFFF;
   width:23.5rem;
   height:13.1rem;
   border-radius:1rem;
   text-align: center;
   position: fixed;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
 #confirm > .confirm-body {
   height: 9rem;
   color: #333333;
   font-size: 1.8rem;
   display: flex;
   
 }
 #confirm > .confirm-body > span {
  width: 15rem;
  margin: 0 auto;
  padding-top: 2.5rem;
 }
 #confirm > .confirm-footer {
   font-size: 1.5rem;
   height: 4rem;
   line-height: 4rem;
   display: -webkit-box;
 }
 #confirm > .confirm-footer > span{
   display: block;
   text-align: center;
   -webkit-box-flex: 1;
   border-right: 1px solid #F3F3F3;
   border-top: 1px solid #F3F3F3;
 }
  #confirm > .confirm-footer > .confirm-cancel{
    color: #999999;
  }
  #confirm > .confirm-footer > .confirm-confirm{
   color: #0287FD; 
  }